<template>
  <div class="book-list">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>ISBN</th>
          <th>出版社</th>
          <th>价格</th>
          <th>入库时间</th>
          <th>位置</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          v-for="book in books" 
          :key="book.id"
          @click="$emit('show-detail', book)"
          class="book-item"
        >
          <td>{{ book.id }}</td>
          <td class="title">{{ book.title }}</td>
          <td>{{ book.authors }}</td>
          <td class="isbn">{{ book.isbn }}</td>
          <td>{{ book.publisher }}</td>
          <td class="price">{{ book.price || '-' }}</td>
          <td>{{ book.add_time }}</td>
          <td class="location_code">{{ book.location_code || "-" }}</td>
          <td class="actions">
            <!-- 在删除按钮旁添加加载状态 -->
            <button 
              class="delete-btn"
              :disabled="isDeleting"
              @click.stop="handleDelete(book.id)"
            >
              <span v-if="isDeleting">删除中...</span>
              <span v-else>删除</span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div v-if="books.length === 0" class="empty-tip">
      📚 暂时没有图书数据，请扫描ISBN添加第一本书
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookList',
  props: {
    books: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    async handleDelete(bookId) {
      if (!confirm('确定要删除这本图书吗？')) return
      
      try {
        const response = await this.$api.delete(`/books/${bookId}`)
        if (response.status === 200) {
          this.$emit('book-deleted', bookId) // 触发删除事件
          alert('删除成功！')
        }
      } catch (err) {
        alert(`删除失败: ${err.response?.data?.error || err.message}`)
      }
    }
  }
}
</script>

<style scoped>
.book-list {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.book-item:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

.title {
  font-weight: 500;
  color: #2c3e50;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.isbn {
  font-family: monospace;
  color: #666;
}

.price {
  color: #b61fd7;
  font-weight: 500;
}

.location_code {
  color: #60b142;
  font-weight: 500;
}

.empty-tip {
  padding: 40px 20px;
  text-align: center;
  color: #95a5a6;
  background: white;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
  }
  
  th, td {
    min-width: 120px;
  }
}

.delete-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.delete-btn:hover {
  background: #ff6b81;
}

.actions {
  min-width: 100px;
}

</style>